<script lang="ts" setup>
import { ref } from 'vue';

import { JsonViewer, useVbenModal } from '@vben/common-ui';

import { ElCol, ElForm, ElFormItem, ElRow } from 'element-plus';

import { $t } from '#/locales';

const operLog = ref();

const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    operLog.value = modalApi.getData();
  },
});
</script>

<template>
  <Modal class="w-full max-w-[700px]">
    <ElForm :model="operLog" label-width="100px">
      <ElRow>
        <ElCol :span="12">
          <ElFormItem :label="$t('system.title')">
            {{ operLog.title }}
          </ElFormItem>
          <ElFormItem :label="$t('system.subTitle')">
            {{ operLog.subTitle }}
          </ElFormItem>
          <ElFormItem :label="$t('system.operate') + $t('user.name')">
            {{ operLog.operName }} / {{ operLog.operIp }}
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem
            :label="$t('common.address')"
            v-access:code="['operlog:field']"
          >
            {{ operLog.operUrl }}
          </ElFormItem>
          <ElFormItem
            :label="$t('system.requestMethod')"
            v-access:code="['operlog:field']"
          >
            {{ operLog.requestMethod }}
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem
            :label="$t('system.operate') + $t('common.type')"
            v-access:code="['operlog:field']"
          >
            {{ operLog.method }}
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem
            :label="$t('common.request') + $t('common.params')"
            v-access:code="['operlog:field']"
          >
            <JsonViewer :value="JSON.parse(operLog.operParam)" boxed />
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem
            :label="$t('common.response') + $t('common.params')"
            v-access:code="['operlog:field']"
          >
            <JsonViewer
              :value="JSON.parse(operLog.jsonResult)"
              :expand-depth="3"
              boxed
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="6">
          <ElFormItem :label="$t('common.status')">
            <div v-if="operLog.status === '0'">成功</div>
            <div v-else-if="operLog.status === '1'">失败</div>
          </ElFormItem>
        </ElCol>
        <ElCol :span="10">
          <ElFormItem :label="$t('common.createTime')">
            {{ operLog.operTime }}
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem
            :label="$t('common.fail') + $t('common.info')"
            v-if="operLog.status === '1'"
          >
            {{ operLog.errorMsg }}
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
  </Modal>
</template>
